<template>
    <transition name="regiter">
        <div class="regiter">
            <LoginLeft/>
            <div class="right">
                <p class="title">欢迎登陆TodoList</p>
                <Input 
                    text="username" 
                    rule="^[a-zA-Z0-9_-]{4,16}$"
                    @getUserInfo="username => this.username = username"
                    pText="账号必须为4-16位的数字字母下划线"
                    >
                </Input>
                <Input 
                    text="password" 
                    type="password"
                    rule="^[a-zA-Z0-9_-]{6,16}$"
                    @getUserInfo ="password => this.password = password"
                    pText="密码必须为6-16位的数字字母下划线"
                />
                <LoginBtn 
                    btnText = "注册"
                    @click.native="regiterRequest"
                />
                <a 
                    href="javascript:;" 
                    @click="goLogin">
                    注册完成？现在登陆！
                </a>
            </div>  
            <transition name="upBox">
                <Tips :msg = "regiterMsg" v-show="upBoxisShow"/>
            </transition>
        </div>
    </transition>
</template>

<script>
    import {mapState} from 'vuex'
    import LoginLeft from "../component/LoginLeft.vue"
    import Input from '../component/UserInput.vue'
    import LoginBtn from '../component/LoginBtn.vue'
    import Tips from '../component/Tips.vue'
    export default {
        name:"Register-Component",
        components:{LoginLeft,Input,LoginBtn,Tips},
        data(){
            return {
                username:"",
                password:"",
            }
        },
        methods:{
            // 去登陆页面
            goLogin(){
                this.$router.push('/UserLogin')
            },
            regiterRequest(){
                const user ={
                    username:this.username,
                    password:this.password
                }
                console.log(this.regiterMsg)
                this.$store.dispatch('resgister/regiterRequest',user)
                this.username = ''
                this.password = ''
            }
        },
        computed:{
            ...mapState('resgister',['regiterMsg','upBoxisShow'])
        }
    }
</script>

<style>
    .regiter-enter,.regiter-leave-to,.upBox-enter,.upBox-leave-to{
        opacity: 0;
    }

    .regiter-enter-to,.regiter-leave,.upBox-enter-to,.upBox-leave{
        opacity: 1;
    }

    .regiter{
        width: 60%;
        height: 70%;
        background: rgb(176, 228, 196);
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        border-radius: 1vw;
        display: flex;
        transition: .5s;
    }
</style>